<template>
  <div v-resize-rf="onResize" class="d-table">
    <el-table
      ref="elTable"
      :data="list"
      header-row-class-name="d-table-header"
      :height="autoTableHeight"
      stripe
      @selection-change="onSelectionChange"
      @sort-change="onSortChange"
    >
      <el-table-column align="center" type="selection" width="55" />

      <el-table-column label="班级名称" prop="className" />

      <el-table-column label="班级代码" prop="classCode" />

      <el-table-column label="班级年份" prop="grade" sortable="custom" />

      <el-table-column label="培养层次" prop="dictCultivationLevel">
        <template #default="scope">
          <div>
            {{
              $dictToName('cultivation_level', scope.row.dictCultivationLevel)
            }}
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="班级人数"
        prop="classHumanCount"
        sortable="custom"
      />

      <el-table-column label="所属学院" prop="collegeName" />

      <el-table-column label="所属系" prop="professionName" />

      <el-table-column align="center" label="操作" min-width="140">
        <template #default="scope">
          <el-button
            size="small"
            text
            type="info"
            @click="$emit('detail', scope.row)"
          >
            查看
          </el-button>

          <el-button
            size="small"
            text
            type="primary"
            @click="$emit('edit', scope.row)"
          >
            编辑
          </el-button>

          <el-button
            size="small"
            text
            type="danger"
            @click="$emit('del', scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    props: {
      list: {
        type: Array,
        default: () => [],
      },
    },

    emits: ['update:selection', 'save', 'detail', 'edit', 'del', 'sortChange'],

    data() {
      return {
        autoTableHeight: 400,
      }
    },

    mounted() {},

    methods: {
      onResize({ height }) {
        this.$nextTick(() => {
          this.autoTableHeight = height
        })
      },

      onSelectionChange(val) {
        this.$emit('update:selection', val)
      },

      onSortChange({ column, prop, order }) {
        const data = {
          orderByColumn: prop,
          isAsc: order === 'ascending' ? 'asc' : 'desc',
        }

        this.$emit('sortChange', data)
      },
    },
  }
</script>

<style lang="scss" scoped></style>
